<template>
  <el-row class="module_title" :mname="mname">
    <transition
                      v-on:before-enter="beforemodule_titleEnter1"
                      v-on:enter="module_titleEnter1"
    >
      <p class="cn_name" v-if="titleShow"  :key="1">{{cn_name}}</p>
    </transition>
    <transition
      v-on:before-enter="beforemodule_titleEnter2"
      v-on:enter="module_titleEnter2"
    >
      <p class="en_name"  v-if="titleShow" :key="2">{{en_name}}</p>
    </transition>
      <transition
        v-on:before-enter="beforemodule_titleEnter3"
        v-on:enter="module_titleEnter3"
      >
      <p class="line" v-if="titleShow"  :key="3"></p>
      </transition>

  </el-row>
</template>
<script>
  export default {
    data () {
      return {
          titleShow : false
      }
    },
    props:['cn_name' , 'en_name' ,'mname', 'show'],
    methods:{
      beforemodule_titleEnter1(el){
        Velocity(el, { opacity: 0}, { duration: 0 })
      },
      module_titleEnter1(el , done){
        Velocity(el, { opacity: 0.2 , translateY : '500px'}, { duration: 100 })
        Velocity(el, { opacity: 0.5 , translateY : '0px'}, { duration: 800 })
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 800  , complete: done})
      },
      beforemodule_titleEnter2(el){
        Velocity(el, { opacity: 0}, { duration: 0 })
      },
      module_titleEnter2(el , done){
        Velocity(el, { opacity: 0.2 , translateY : '500px'}, { duration: 150 })
        Velocity(el, { opacity: 0.5 , translateY : '0px'}, { duration: 900 })
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 800  , complete: done})
      },
      beforemodule_titleEnter3(el){
        Velocity(el, { opacity: 0}, { duration: 0 })
      },
      module_titleEnter3(el , done){
        Velocity(el, { opacity: 0.2 , translateY : '500px'}, { duration: 200 })
        Velocity(el, { opacity: 0.5 , translateY : '0px'}, { duration: 1000 })
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 1500  , complete: done})
      },
      handleScrolls(){
        if(this.$el.parentNode.offsetTop < window.scrollY + 600)
        this.titleShow = true
      }
    },
    mounted(){
      window.addEventListener('scroll', this.handleScrolls)
      if(this.$el.parentNode.offsetTop < window.scrollY + 600)
        this.titleShow = true

      console.log(window)
    },
    computed : {

    }
  }
</script>
